<template>
  <div class="wrapper">
    <!-- <el-button v-if="$_permisson('/core/function/add')" icon="el-icon-plus" circle @click="handleCreated" /> -->
    <JTable :table-list="treeData" :config="tableConfig">
      <template slot="Actions" slot-scope="{row}">
        <el-button type="text" @click="handleActive(row,'more')">详情</el-button>
        <el-button v-if="$_permisson('/core/function/add')" type="text" @click="handleActive(row,'addChildren')">新增下级</el-button>
        <el-button v-if="$_permisson('/core/function/update')" type="text" @click="handleActive(row,'edit')">编辑</el-button>
        <el-button v-if="$_permisson('/core/function/delete')" type="text" @click="handleActive(row,'removeItem')">删除</el-button>
      </template>
    </JTable>

    <el-dialog :title="dialog.title[dialog.active]" :visible.sync="dialog.dialogVisible" destroy-on-close>
      <created v-if="dialog.active!=='children'" :read="dialog.active=='more'" :emit-data="selectedItem" @handleBoxEvent="handleDialog" />
      <childrenBtns v-if="dialog.active === 'children'" :emit-id="currentId" />
    </el-dialog>
  </div>
</template>
<script>
import pageBtn from '@/views/mixin/pageBtn'
import { getListMenu, removeItem, createdFuntion, updataItem } from '@/api/menus'
import created from './widget/created'
import childrenBtns from './widget/childrenBtns'
import JTable from '@/components/JTable'

export default {
  name: 'Menus',
  components: {
    created,
    childrenBtns,
    JTable
  },
  mixins: [pageBtn],
  props: {},
  data() {
    const listQuery = {
      total: 0,
      page: 1,
      size: 10
    }
    const dialog = {
      dialogVisible: false,
      active: '',
      title: { created: '创建菜单', edit: '更新菜单', children: '功能点', more: '查看详情' }
    }
    const defaultProps = {
      children: 'children',
      label: 'alias'
    }
    return {
      listLoading: false,
      dialog,
      listQuery,
      currentId: null,
      list: [],
      defaultProps,
      selectedItem: {},
      childrenFunction: [],
      childrenBtn: [],
      tableConfig: {
        listLoading: this.listLoading,
        pagination: listQuery,
        tableAttribute: {
          'row-key': 'id',
          'tree-props': { children: 'children', hasChildren: '_' }
        },
        thead: [
          // {
          //   type: 'selection'
          // },
          // {
          //   type: 'index',
          //   label: '-',
          //   start: 1
          // },
          {
            prop: 'functionName',
            label: '菜单名称',
            width: 200,
            align: 'left'
          },
          {
            prop: 'code',
            label: 'code'
          },
          // {
          //   prop: 'id',
          //   label: 'ID'
          // },
          {
            prop: 'functionLevel',
            label: '菜单级别'
          },
          {
            prop: 'sort',
            label: '排序'
          },
          {
            prop: 'remark',
            label: '说明'
          },
          {
            prop: 'icon',
            label: '图标'
          },
          {
            prop: '',
            label: 'Actions',
            type: 'actions',
            width: '300',
            align: 'center'
          }
        ],
        activeBox: {
          btnRules: { created: '/core/function/add', rulesFuntion: this.$_permisson }, // 按btn个数重左向右
          bindDefaultEvent: this.handleCreated
        }
      }
    }
  },
  computed: {
    treeData() {
      const data = this.list
      const result = data
      return result
    }
  },
  watch: {},
  created() {
    this.getList()
  },
  mounted() { },
  methods: {
    handleNodeClick(data) {
      console.log(data)
    },
    handleActive(target, type) {
      const { id } = target
      this.currentId = id
      if (type === 'addChildren') {
        this.showDialog()
      }
      if (type === 'removeItem') {
        this.delItem(id)
      }
      if (['edit', 'more'].includes(type)) {
        this.selectedItem = target
        this.showDialog(type)
      }
      if (type === 'childrenFunction') {
        this.showDialog('children')
      }
    },
    getList() {
      getListMenu().then(res => {
        const { data, code } = res
        if (code === 200) {
          this.list = data
        }
      })
    },
    delItem(ids) {
      this.$confirm('此操作不可逆转, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeItem(ids).then(res => {
          const { code, message } = res
          if (code === 200) {
            this.$message({
              message,
              type: 'success'
            })
            this.getList()
            return
          }
          this.$message.error(message)
        })
      })
    },
    handleCreated() {
      this.setCurrentID()
      this.showDialog()
    },
    setCurrentID() {
      this.currentId = null
    },
    showDialog(target = 'created') {
      this.dialog.active = target
      this.dialog.dialogVisible = true
    },
    closeDialog() {
      this.setCurrentID()
      this.dialog.active = ''
      this.dialog.dialogVisible = false
    },
    handleDialog(emitObj) {
      const { target } = emitObj
      if (!target) {
        return this.closeDialog()
      }
      if (this.dialog.active === 'edit') {
        this.updataItem(target)
        return
      }
      this.saveClient(target)
    },
    updataItem(item) {
      item = { ...item, id: this.selectedItem.id }
      updataItem(item).then(res => {
        const { code, message } = res
        if (code === 200) {
          this.$message({
            message,
            type: 'success'
          })
          this.closeDialog()
          this.getList()
          return
        }
        this.$message.error(message)
      })
    },
    saveClient(item) {
      if (this.currentId) {
        item.parentId = this.currentId
      }
      createdFuntion(item).then(res => {
        const { code, message } = res
        if (code === 200) {
          this.$message({
            message,
            type: 'success'
          })
          this.closeDialog()
          this.getList()
          return
        }
        this.$message.error(message)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.wrapper{
   padding: 1rem;
   margin: 0px;
}
</style>
